<template>
	<view class="">
			<block v-if="bindstatus==0">
				<view class=" b1 b2 u-flex u-flex-between u-flex-y-center">
					<input class="input_code" type="number" v-model="memberCard" placeholder="会员卡号" >
					<view class="scan" @click="toScan">
						<!-- <image :src="imgUrl+'setting.png'" mode=""></image> -->
						<image src="../../static/img/100.png" mode=""></image>
					</view>	
				</view>
			</block>
			<view class="u-flex u-flex-y-center b1" :class="{'unbind':bindstatus}">
				<input class="input_code" type="number" v-model="code" placeholder="请输入验证码" >
				<text>|</text>
				<view class="dynacode" :class="dynacodeData.seconds == 60 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendMobileCode">
					{{ dynacodeData.codeText }}
				</view>
			</view>
		<view class="p">验证码将发送到手机号{{mobile | mobile}}</view>
		<view class="button" @click="sure" style="margin-top: 90rpx;">
			确定
		</view>	
		<view class="btn-apply" @click="MemberIcselfregist" v-if="bindstatus==0">
			一键申请新卡
		</view>
	</view>
</template>

<script>
import { goBack, goRedirectTo, goTo } from '../../common/common';

	export default{
		components:{
		
		},
		filters: {
			mobile(mobile) {
				return mobile.substring(0, 4 - 1) + '****' + mobile.substring(6 + 1);
			}
		},
		data() {
		 
			return {
				imgUrl:this.imgUrl,
				code:"",
				mobile:"",
				dynacodeData: {
					seconds: 60,
					timer: null,
					codeText: '获取验证码',
					isSend: false
				},
				key: '',
				bindstatus:0,
				memberCard:"",
				userInfo:""
			}
		},
		computed: {
		  
		},
		onLoad(options) {
			
			this.bindstatus = options.bindstatus
			if(this.bindstatus==0){
				uni.setNavigationBarTitle({
					title:'绑定会员卡'
				})
			}
			this.userInfo = uni.getStorageSync("userInfo")
			console.log(uni.getStorageSync("userInfo"))
			this.mobile = this.userInfo.mobile
		},
		methods: {
			sendMobileCode() {
				if (this.dynacodeData.seconds != 60) return;
				if (this.dynacodeData.isSend) return;
				this.dynacodeData.isSend = true;
					
					this.$http.getSmsCode({
						mobile:this.mobile,
						// code:this.code
					}).then(res => {
						if(res.code==0){
							this.dynacodeData.isSend = false;
							if (this.dynacodeData.seconds == 60 && this.dynacodeData.timer == null) {
								this.dynacodeData.timer = setInterval(() => {
									this.dynacodeData.seconds--;
									this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
								}, 1000);
							}
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						}
						
					})
			},
			MemberIcselfregist(){ //一键申请
				this.$http.MemberIcselfregist({
					
				}).then(res => {
					if(res.code==0){
						goTo('/subpkg/my/bind_success')
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			},
			MemberCard(){
				if(this.bindstatus==0){
					uni.showModal({
						content:"您确定绑定此会员卡吗",
						success: (res) => {
							if(res.confirm){
								this.MemberBindCard()
							}
						}
					})
				}else{
				uni.showModal({
					content:"您确定解绑会员卡吗",
					success: (res) => {
						if(res.confirm){
							this.MemberUnicregist()
						}
					}
				})	
				}
			},
			MemberUnicregist(){
				this.$http.MemberUnicregist({
					yzm:this.code,
					cardno:uni.getStorageSync("userInfo").cardNo
				}).then(res => {
					if(res.code==0){
						uni.showToast({
							title: "解绑成功",
							icon:'none'
						})
						uni.$emit("changeUserInfo")
						goBack()
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			},
			MemberBindCard(){
				this.$http.MemberBindCard({
					yzm:this.code,
					cardno:this.memberCard,
					mobile:this.userInfo.mobile
				}).then(res => {
					if(res.code==0){
						uni.showToast({
							title: "绑定成功",
							icon:'none'
						})
						uni.$emit("changeUserInfo")
						// goBack()
						goTo('/subpkg/my/bind_success')
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			},
			sure(){
				if(this.bindstatus==0){
					if(!this.memberCard){
						uni.showToast({
							title:"未填写绑定的会员卡",
							icon:"none"
						})
						return
					}
					if(!this.code){
						uni.showToast({
							title:"未填写验证码",
							icon:"none"
						})
						return
					}
				}else{
					if(!this.code){
						uni.showToast({
							title:"未填写验证码",
							icon:"none"
						})
						return
					}
				}
				this.MemberCard();
			},
			toScan(){
				uni.scanCode({
					success: function (res) {
						console.log(res)
						this.memberCard = res.result;
						
					}
				});
			}
		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 60,
							timer: null,
							codeText: '获取动态码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	
	.b1{
		margin: 0 auto;
		width: 658rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid rgba(204,204,204,0.13);
		padding: 0 30rpx;
		.input_code{
			line-height: 120rpx;
			font-size: 28rpx;
			width: 434rpx;
		}
		.dynacode{
			width: 222rpx;text-align: center;font-size: 24rpx;color: #BFB49B;height: 120rpx;line-height: 120rpx;
		}
	}
	.b2{
		margin-top: 70rpx;
		border-radius: 10rpx 10rpx 0 0;
		.scan{
			width: 40rpx;height: 40rpx;
			image{width: 100%;height: 100%;}
		}
	}
	.unbind{
		margin-top: 70rpx;border-radius: 0 0 10rpx 10rpx;
	}
	text{color: #ccc;font-size: 38rpx;}
	.p{
		margin:24rpx 46rpx;font-size: 28rpx;color: #888;
	}
	.btn-apply{
		position: absolute;
		width: 628rpx;height: 80rpx;line-height: 80rpx;
		background: #EDFAFF;
		color: #098E71;font-size: 32rpx;
		text-align: center;
		border-radius: 40rpx;
		left: 60rpx;bottom: 135rpx;
	}
</style>